import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {HttpErrorResponse} from '@angular/common/http';
import {SystemMgmtServices} from '../http/service';

interface SystemParamTableItem {
  id: number;
  paramCode: string;
  paramDesc: string;
  paramValue: string;
  paramType: string;
  isEncrypt: string;
  createTime: string;
  createUserName: string;
}


@Component({
  selector: 'system-param-mgmt',
  styleUrls: ['./components.less'],
  template: `
    <div class="dataMgmtContainer">
      <div class="data-mgmt-bar">
        <div><span>系统参数码：</span><input nz-input placeholder="输入系统参数码搜索" [(ngModel)]="keyword"/></div>
        <button nz-button nzType="primary" (click)="loadTableData()">查询</button>
        <button nz-button style="background:'green';color:'#fff';border-color:'transparent'" (click)="isVisible = true">新增</button>
      </div>
      <nz-table #systemParamsTable [nzShowSizeChanger]="true" [nzShowQuickJumper]="true"
                [nzData]="tableData" [nzLoading]="loading" [nzFrontPagination]="false"
                [nzTotal]="pagination.total" [(nzPageSize)]="pagination.size" [(nzPageIndex)]="pagination.start"
                (nzPageIndexChange)="pagination.start = $event;loadTableData()"
                (nzPageSizeChange)="pagination.size = $event;loadTableData()">
        <thead>
        <tr>
          <th>编码</th>
          <th>描述</th>
          <th>值</th>
          <th>创建人</th>
          <th>创建时间</th>
          <th nzAlign="center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of systemParamsTable.data">
          <td>{{ data.paramCode }}</td>
          <td>{{ data.paramDesc }}</td>
          <td>{{ data.paramValue }}</td>
          <td>{{ data.createUserName }}</td>
          <td>{{ data.createTime}}</td>
          <td class='option-td' nzAlign="center">
            <span (click)="isVisible = true;editData = data;this.systemParamForm.patchValue(data);mode='edit'">修改</span>
            <span (click)="deleteVisible = true;editData = data">删除</span>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
    <nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" (nzOnCancel)="isVisible = false" (nzOnOk)="onSubmit()">
      <ng-template #modalTitle>{{mode === 'create' ? '新增' : '修改'}}系统参数</ng-template>
      <ng-container *nzModalContent>
        <form nz-form [formGroup]="systemParamForm">
          <nz-form-item>
            <nz-form-label nzRequired [nzSpan]="4">
              编码
            </nz-form-label>
            <nz-form-control nzErrorTip="请输入内容" [nzSpan]="16">
              <input nz-input formControlName="paramCode"/>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired [nzSpan]="4">
              描述
            </nz-form-label>
            <nz-form-control nzErrorTip="请输入内容" [nzSpan]="16">
              <input nz-input formControlName="paramDesc"/>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired [nzSpan]="4">
              类型
            </nz-form-label>
            <nz-form-control [nzSpan]="6">
              <nz-select nzPlaceHolder="请选择" formControlName='paramType' [nzOptions]="selectData">
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired [nzSpan]="4">
              值
            </nz-form-label>
            <nz-form-control nzErrorTip="请输入内容" [nzSpan]="16">
              <input nz-input formControlName="paramValue"/>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired [nzSpan]="4">
              是否加密
            </nz-form-label>
            <nz-form-control [nzSpan]="6">
              <nz-select nzPlaceHolder="请选择" formControlName='isEncrypt'>
                <nz-option nzValue="1" nzLabel="是"></nz-option>
                <nz-option nzValue="0" nzLabel="否"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </form>
      </ng-container>
    </nz-modal>

    <nz-modal [(nzVisible)]="deleteVisible" nzTitle="警告" (nzOnOk)="onDelete()" (nzOnCancel)="deleteVisible=false">
      <ng-container *nzModalContent>
        您确认要删除？
      </ng-container>
    </nz-modal>
  `
})
export class SystemParamMgmtComponent implements OnInit {
  constructor(private fb: FormBuilder, private http: SystemMgmtServices) {
  }

  systemParamForm!: FormGroup;
  isVisible = false;
  deleteVisible = false;
  selectData: any;
  mode = 'create';
  pagination = {
    start: 1,
    size: 10,
    total: 0
  };
  loading = true;
  keyword = '';
  tableData !: SystemParamTableItem[];
  editData !: SystemParamTableItem;

  ngOnInit(): void {
    this.loadTableData();
    this.http.getAllDataDictItem().subscribe(
      (response) => {
        if (response) {
          const options = response.data;
          options.forEach(item => {
            item.label = item.itemName;
            item.value = item.itemValue;
          });
          this.selectData = options;
        }
      }, () => {
      }
    );
    this.systemParamForm = this.fb.group({
      paramCode: [null, Validators.required],
      isEncrypt: ['1', Validators.required],
      paramValue: [null, Validators.required],
      paramDesc: [null, Validators.required],
      paramType: [null, Validators.required]

    });
  }

  loadTableData(): void {
    const {start, size} = this.pagination;
    this.http.querySystemParam({start: start - 1, size, keyword: this.keyword}).subscribe(
      (response) => {
        console.log(response);
        this.tableData = response.data.content;
        this.pagination.total = response.data.totalElements;
        this.loading = false;
      }, (error: HttpErrorResponse) => {

      }
    );
  }

  onSubmit(): void {
    if (this.mode !== 'create') {
      this.http.editSystemParam({...this.systemParamForm.value, id: this.editData.id}).subscribe(
        (response) => {
          if (response.code === 0) {
            this.loadTableData();
            this.systemParamForm.reset();
            this.isVisible = false;
            this.mode = 'create';
          }
        }, () => {
        }
      );
    } else {
      this.http.createSystemParam(this.systemParamForm.value).subscribe(
        (response) => {
          if (response.code === 0) {
            this.loadTableData();
            this.systemParamForm.reset();
            this.isVisible = false;
          }
        }, () => {
        }
      );
    }

  }

  onDelete(): void {
    this.http.deleteSystemParam(this.editData.id).subscribe(
      (response) => {
        if (response.code === 0) {
          this.loadTableData();
          this.deleteVisible = false;
        }
      }, () => {
      }
    );
  }
}
